<template>
  <section>
    <el-form class="toolbar" label-width="80px" style="margin-top:10px;padding-top:20px;">
      <el-row>
        <el-col :span="5">
          <el-form-item label="选择分站">
            <el-select style="width:100%" v-model="webSiteId" placeholder="请选择">
              <el-option v-for="item in fzlist" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
				<el-col :span="5">
          <el-form-item label="用户姓名">
             <el-input v-model="userName"></el-input>
          </el-form-item>
        </el-col>
				<el-col :span="5">
          <el-form-item label="手机号">
             <el-input v-model="mobile"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="日期">
            <el-date-picker
              v-model="dateValue"
              type="daterange"
              @change="datechange"
              style="width:100%"
              range-separator="至"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        
        <el-col :span="5">
          <el-form-item>
            <el-button type="primary" @click="shousuo">搜索</el-button>
            <el-button type="primary">导出报表</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table highlight-current-row :data="dataList" style="width: 100%;">
      <el-table-column align="center" prop="webSiteName" label="分站名称"></el-table-column>
			 <el-table-column align="center" prop="userName" label="用户姓名"></el-table-column>
      <el-table-column align="center" prop="bank" label="提现银行"></el-table-column>
      <el-table-column align="center" prop="cardNum" label="银行账号"></el-table-column>
      <el-table-column align="center" label="提现金额">
        <template slot-scope="scope">{{scope.row.money/100}} 元</template>
      </el-table-column>
      <el-table-column align="center" label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.state==0">未处理</span>
          <span v-if="scope.row.state==1">已同意</span>
          <span v-if="scope.row.state==-1">已拒绝</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.deleteFlag!=true" @click="chuli(scope.row.id,1)" size="mini">同意</el-button>
          <el-button v-if="scope.row.deleteFlag!=true" @click="chuli(scope.row.id,-1)" size="mini">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="padding:20px;text-align:center;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      page: 1,
      size: 10,
      dataList: [],
      dateValue: "",
      fzlist: [],
      begin: "",
      end: "",
			userName: "",
			mobile:'',
      webSiteId: ""
    };
  },
  methods: {
    //获取列表
    getfzlist() {
      let that = this;
      this.axios({
        method: "GET",
        headers: {
          Authorization: sessionStorage.getItem("token"),
          "Content-Type": "application/x-www-form-urlencoded",
          domain: "taobao.tianyalei.com"
        },
        url: "/webSite?page=0&size=999999&name=&account="
      }).then(function(response) {
        if (response.data.code == 200) {
          that.fzlist = response.data.data.list;
        }
      });
    },
    shousuo: function() {
      let that = this;
      this.axios({
        method: "GET",
        headers: {
          Authorization: sessionStorage.getItem("token"),
          "Content-Type": "application/x-www-form-urlencoded",
          domain: "taobao.tianyalei.com"
        },
        url:
          "/userDrawMoney?page=" +
          (that.page - 1) +
          "&size=" +
          that.size +
          "&userName=" +
					that.userName +
					"&mobile=" +
          that.mobile +
          "&begin=" +
          that.begin +
          "&end=" +
          that.end +
          "&webSiteId=" +
          that.webSiteId+
          "&deleteFlag=true"
      }).then(function(response) {
        if (response.data.code == 200) {
          that.dataList = response.data.data.list;
          that.total = response.data.data.totalCount;
        }
      });
    },
    datechange(e) {
      this.begin = e.split("至")[0];
      this.end = e.split("至")[1];
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.shousuo();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.shousuo();
		},
		chuli(id,state){
			 let that=this;
			 this.$confirm('请确认此操作, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           that.axios.put('/userDrawMoney',
						that.qs.stringify({id:id,state:state}),{
									headers: {
										'Content-Type': 'application/x-www-form-urlencoded',
										'domain':'taobao.tianyalei.com',
										"Authorization":sessionStorage.getItem('token')
									}
								})
						.then(function (response) {
								if(response.data.code==200){
									that.$message({
											message: '已处理',
											type: 'warning'
										});
										that.shousuo();
								}else{
										that.$message({
											message: response.data.message,
											type: 'warning'
										});
								}
							})
      })
		}
  },

  created() {
    this.getfzlist();
    this.shousuo();
  }
};
</script>